<!--作者：彭心愉
描述：小组评分详情弹窗
修改人：彭心愉  -->
<template>
<div>

        <!-- <input
        type="text"
        class="header-input"
        placeholder="Please Input"
      /> -->

      <div class="content">
        <span class="titleText"><h2>小组评分</h2></span>
        <span class="down-icon" @click="backTeamScore"><img src="@/assets/icon/down.png" style="width: 55px; height: 55px;"></span>
        <hr class="langHr">
        <hr class="shortHr">

        <div class="table">
            <ul>
                <li>小组 : 做大做强</li>
                <li>小组长 : 王大壮</li>
                <li>成员 : 杜甫、王维、杜牧、韩非子、李白</li>
                <li>成员数 : 6</li>
                <li>院系 : 文学院</li>
                <li>项目名称 : 五言律诗创作</li>
            </ul>
            <el-row>
               分数 :
                <el-input v-model="score" class="w-50 m-2 inputtext"  placeholder="请录入分数" style="width: 200px; margin-top: -4px;margin-left: 6px;"/>
            </el-row>
            <el-row class="textarea">
                评语 :
                <el-input v-model="comments" class="w-50 m-2 inputtext"  placeholder="" type="textarea"  maxlength="30"/>
            </el-row>   
            <el-button color="#3e94ad" class="btn" >保存</el-button>
        </div>



                
      </div>

</div>
</template>

<script>
import { useRouter, useRoute } from 'vue-router'
import { Search,Calendar  } from '@element-plus/icons-vue'
import { reactive, toRefs } from 'vue'
export default{
    name:'TeamScoreInfo',
    setup(props,context){
        const router =  useRouter()
        const route = useRoute()            
        // function backTeamScore() {
        //     router.push({name:'teamscore'})
        // }
        function backTeamScore() {
            context.emit('closeclick',false)
        }
        let data = reactive({
            comments:'',
            score:''
        })
        return{
            Search,
            Calendar,
            backTeamScore,
            ...toRefs(data)
        }
    }
}
</script>

<style lang="less" scoped>


    .header-input{
        width: 180px;
        margin-top: 40px;
        margin-left: 100px;
        padding-left: 20px;
        border: 1px #666 solid;
        border-radius: 30px;
        background-color: #c2dae2;
    }

    .content{
        position: relative;
        width: 800px;
        height: 480px;
        background-color: #e0eef2;
        margin: auto;
        margin-top: 50px;
        border-radius: 50px;
        .titleText{
               position: absolute;
               top: 20px;
               left: 40px;
               font-size: 20px;
               color: rgb(62, 148, 173);
        }
        .down-icon{
               position: absolute;
               top: 16px;
               right: 50px;
               cursor:pointer;
        }
        .langHr{
            position: absolute;
            height: 1px;
            width:720px;
            left: 40px;
            top:80px;
            z-index: 20;
            border: 1px solid rgb(194, 218, 226);
            background-color: rgb(194, 218, 226);
        }
        .shortHr{
            position: absolute;
            // height: 1px;
            // width:720px;
            left: 40px;
            top:80px;
            z-index: 21;
            width: 200px;
            border: 4px solid rgb(62, 148, 173);
            margin-top: -3px;
            border-radius: 20px;
            background-color: rgb(62, 148, 173);

        }
        .table{
            position: absolute;
            width: 500px;
            height: 300px;
            color: #666;
            // border: #666 1px solid;
            top: 150px;
            left: 50%;
            transform: translate(-50%,0);
            ul{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                li{
                    // border: #666 1px solid;
                    white-space: nowrap;
                    text-overflow:ellipsis;
                    overflow:hidden; 
                    width: 200px;
                    height: 25px;
                    margin-bottom: 10px;
                }
            }
        //    el-input [type='text']{
        //         width: 200px;
        //     }
            .btn{
                position: relative;
                top: 20px;
                left: 50%;
                transform: translateX(-50%);
                margin: auto;
                width: 160px;
                height: 35px;
                
            }

        }

    }
</style>